import RnButton from 'components/RnButton';
import React from 'react';
import {
  View,
  Text,
  StyleProp,
  ViewStyle,
  StyleSheet,
  FlatList,
  Image,
} from 'react-native';
import LinearGradient from 'react-native-linear-gradient';

export interface PropsType {
  style: StyleProp<ViewStyle>;
  description?: string;
  images?: string[];
}
const renderItem = ({item, index}: {item: any; index: number}) => {
  return (
    <Image
      key={index}
      style={index === 0 ? styles.firstImageItem : styles.imageItem}
      source={{uri: item}}
    />
  );
};
export default function DetailWhat(props: PropsType) {
  return (
    <View style={props.style}>
      <FlatList
        style={{
          marginBottom: 12,
        }}
        data={props.images}
        horizontal={true}
        renderItem={renderItem}
        keyExtractor={(item) => item.id}
      />
      <View style={styles.container}>
        <Text style={styles.mainText}>{props.description}</Text>
      </View>
      <LinearGradient
        locations={[0, 0.7, 1]}
        colors={['#FFFFFF00', '#FFFFFFF0', '#FFFFFFFF']}
        style={styles.linearGradient}>
        <View style={styles.maskContainer}>
          <RnButton type="primary" fontSize={10} color="#000">
            VIEW ALL
          </RnButton>
        </View>
      </LinearGradient>
    </View>
  );
}
const styles = StyleSheet.create({
  container: {
    height: 138,
  },
  maskContainer: {
    flex: 1,
    alignItems: 'flex-end',
    justifyContent: 'flex-end',
  },
  linearGradient: {
    position: 'absolute',
    height: 50,
    bottom: 0,
    left: 0,
    right: 0,
  },
  mainText: {
    fontSize: 14,
    color: '#67616D',
  },
  buttonText: {
    fontSize: 18,
    fontFamily: 'Gill Sans',
    textAlign: 'center',
    margin: 10,
    color: '#000',
    backgroundColor: 'transparent',
  },

  firstImageItem: {
    width: 180,
    height: 100,
    borderRadius: 10,
  },
  imageItem: {
    marginLeft: 12,
    width: 180,
    height: 100,
    borderRadius: 10,
  },
});
